<template>
  <a-form
    ref="formRef"
    :model="formState"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
    <a-form-item label="标题或姓名" name="title" :wrapper-col="{ span: 5 }">
      <a-input v-model:value="formState.title" />
    </a-form-item>
    <a-form-item label="编辑者" name="editor" :wrapper-col="{ span: 5 }">
      <a-input v-model:value="formState.editor" />
    </a-form-item>
    <!-- <a-form-item label="上传图片" name="upload">
      <upload />
    </a-form-item> -->
    <!-- 文章编辑：{{ hello }} -->
    <tinymce ref="editor" v-model:value="formState.content" @input="getinput" />
    <!-- <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="onSubmit">Create</a-button>
      <a-button style="margin-left: 10px" @click="resetForm">Reset</a-button>
    </a-form-item> -->
  </a-form>
</template>

<script>
  // import upload from '@/components/form/upload'
  import Tinymce from '@/components/tinymce'
  import { ref, watchEffect, toRaw } from 'vue'
  // import { addSite } from '@/api/httpapi'
  export default {
    props: {
      info: Object,
      hello: String,
    },
    components: {
      // upload,
      Tinymce,
    },
    setup(props) {
      console.log(props.hello)
      const formRef = ref()
      const formState = ref({})
      watchEffect(() => {
        // console.log(`text is: ` + props.hello)
        formState.value = props.info
      })
      // watch(
      //   () => props.info,
      //   (val) => {
      //     console.log(`2text is: `)
      //     console.log(val)
      //   }
      // )
      // formState.value = info
      const content = ref('')
      const getinput = (val) => {
        formState.value.content = val
      }
      const test = () => {
        console.log(formState.value)
      }
      const addarticleInfo = () => {
        formRef.value
          .validate()
          .then(() => {
            console.log('values', formState, toRaw(formState))
          })
          .catch((error) => {
            console.log('error', error)
          })
      }

      const resetForm = () => {
        formRef.value.resetFields()
      }
      // emit('formdata', formState.value)
      return {
        formRef,
        formState,
        labelCol: {
          style: {
            width: '150px',
          },
        },
        wrapperCol: {
          span: 14,
        },
        content,
        getinput,
        test,
        addarticleInfo,
        resetForm,
      }
    },
  }
</script>
